<template>
	<view class="content">
		<view class="search" @click="goSearch">
			<u-search placeholder="请输入产品名称" disabled="true"></u-search>
		</view>

		<!-- colors：选中颜色 current：列表选择序列  左边分类数据 dataList：右边列表数据 @cateClick：左边分类点击 @itemClick：右边条目点击 -->
		<!-- showHeader:true留出顶部115rpx的距离 -->
		<custom-cate colors="#fa436a" :current="currentTwo" :classList="categoryList" :dataList="dataList"
			:hideShow="true" @cateClick="cateClick" @itemClick="itemClick" :showHeader="true" @addColorCard="addColorList"></custom-cate>

		<u-popup v-model="colorCardListShow" mode="bottom" length="50%" border-radius="30">
					<u-divider margin-top="30" margin-bottom="20">索取实物色卡本</u-divider>
					<scroll-view scroll-y="true" style="height: 400rpx;">
					<view v-for="(cate,index) in colorCardList" :key="index" class="color-card-popup">
						<u-icon name="backspace" color="#fab6b6" size="48" style="margin-right: 20rpx;" @click="removeCard(cate)"></u-icon>
						
						<u-image width="100rpx" height="100rpx" :src="cate.icon"></u-image>
						<view class="cate-name">{{cate.name}}</view>
						<u-number-box v-model="cate.numVal" @change="numValChange" :index="cate._id"></u-number-box>
					</view>
					</scroll-view>
					<view class="action-button">
						<u-button type="error" shape="circle" >立即索取色卡本</u-button>
					</view>
					
		</u-popup>
		<u-toast ref="cateToast" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				//分类列表

				// 选中序列
				currentTwo: 0,

				// 右边列表数据
				colorCardListShow:false,
				colorCardList:[]

			}
		},
		mounted() {
			this.$store.dispatch('getCategoryListLevel01');
			this.$store.dispatch('getCategoryHot');
		},
		methods: {
			goSearch() {
				if (!this.hasLogin) {
					uni.showModal({
						title: "提示",
						content: '请登录后查看更多信息 ',
						showCancel:false,
						success(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/my/my'
								})
							}
						}
					})
					return;
				};
				uni.navigateTo({
					url: '/pages/seach/seach'
				})
			},
			cateClick(item) {
				console.log(item, 'item')
				// uni.showModal({
				// 	title: "点击分类条目",
				// 	content: '点击分类条目 = ' + JSON.stringify(item)
				// })
				if (item.name == '热门推荐') {
					this.$store.dispatch('getCategoryHot');
					return;
				}
				this.$store.dispatch('getCategoryListLevel02', item._id);

			},

			itemClick(e) {

				if (!this.hasLogin) {
					uni.showModal({
						title: "提示",
						content: '请登录后查看更多信息 ',
						showCancel:false,
						success(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								// 关闭所有页面，打开到应用内的某个页面
								uni.reLaunch({
									url: '/pages/my/my'
								})
							}
						}
					})
					return;
				}
				uni.navigateTo({
					url: `/pages/list/list?_id=${e._id}`
				})
			},
			// 
			addColorList(e){
				
				const isHasdata = this.colorCardList.some(item=>{
					if(e._id==item._id) return true;
					});
				
				if(isHasdata){
					this.$refs.cateToast.show({
					title: '已经添加过',
					type: 'warning',
					});
					return;
				}
				
				this.colorCardListShow = true;
				let num = 1;
				this.$set(e,'numVal',num);
				this.colorCardList.push(e);
				
			},
			numValChange(e){
				
				
			},
			removeCard(cate){
				const newArr = this.colorCardList.filter(item=>{
					return item._id != cate._id;
				});
				this.colorCardList = newArr;
			},
			// 转发
			onShareAppMessage(){
				return{
					path:`/pages/category/category`,
				}
			},
			// 分享到朋友圈
			onShareTimeline(){
				
			}

		},
		computed: {
			...mapState({
				tabbarList: (state) => state.tabbar.tabbarList || [],
				categoryList: (state) => state.category.categoryList || [],
				dataList: (state) => state.category.dataList || [],
				hasLogin: (state) => state.user.hasLogin,
			}),
		}
	}
</script>

<style scoped lang="scss">
	/* .content {
		display: flex;
		flex-direction: column;
	} */

	.heart {
		width: 750rpx;
		height: 115rpx;
		background-color: red;
		position: absolute;
		top: 0;
		z-index: 999;
	}

	.search {
		height: 115rpx;
		padding: 20rpx 10rpx;
	}
	
	.color-card-popup{
		display: flex;
		align-items: center;
		margin: auto;
		padding: 20rpx 20rpx 20rpx 10rpx;
		.cate-name{
			width: 350rpx;
			color: #000000;
			font-size: 28rpx;
			font-weight: 700;
			margin-left: 10rpx;
			overflow: hidden;
		}
	}
	
	.action-button{
		width: 80%;
		margin: auto;

	}
</style>